<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	
	<!-- 头部导航栏 -->
	<div class="top-header">
		<a href="register.html" class="top-item" style="color: #888888;">注册</a>
		<a href="login.html" class="top-item" style="color: #888888;">登录</a>
	</div>
	
	<!-- 头部搜索栏 -->
	<div class="bottom-header">
		<div class="bottom-content">
			<div style="flex: 1;">
				<a href="index.html">
				<img src="img/logo.gif" width="157" height="50">
				</a>
			</div>
			<div style="flex: 2; text-align: center;">
				<input type="text" placeholder="请输入查询关键词" class="bottom-header-input"/>
				<button type="button" class="bottom-header-btn">搜索</button>
			</div>
			<div  class="cart-btn" style="flex: 1; text-align: right; position: relative;">
				<a href="">
					<img src="img/Shopping-cart-1@3x.png" width="20" height="20">
				</a>
				<div class="cart-box">
					
					<!-- 购物车头部 -->
					<h3>购物车</h3>
					
					<!-- 购物车中间 -->
					<div style="display: flex; align-items: center;">
						<div style="padding: 0px 10px;">
							<img src="img/100.jpg" width="50" height="50">
						</div>
						<div style="font-size: 12px;">
							<p class="text-hidden">
								<span style="color: red;">1</span>
								<span>寻真水果 山东烟台栖霞红富士苹果16-24个 5kg 新鲜水果</span>
							</p>
							<p style="text-align: left; color: red;">0.7</p>
						</div>
					</div>
					
					<!-- 购物车底部 -->
					<div class="cart-bottom">
						<div class="left">
							<span>共:  ￥0.73</span>
						</div>
						<div class="right">
							查看购物车
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 首页主体 -->
	<div style="padding-top: 40px; display: flex;">
		<!-- 主体左侧 -->
		<ul class="menu">
			<li class="menu-item">
				<img src="img/mens.png" width="16" height="16">
				<span>分类</span>
			</li>
			<li class="menu-item">
				<img src="img/location%20(1).png" width="16" height="16">
				<span>电子类</span>
			</li>
			<li class="menu-item">
				<img src="img/location%20(1).png" width="16" height="16">
				<span>男装</span>
			</li>
			<li class="menu-item">
				<img src="img/location%20(1).png" width="16" height="16">
				<span>家具</span>
			</li>
			<li class="menu-item">
				<img src="img/location%20(1).png" width="16" height="16">
				<span>新分类</span>
			</li>
			<li class="menu-item">
				<img src="img/location%20(1).png" width="16" height="16">
				<span>蔬菜类</span>
			</li>
			<li class="menu-item">
				<img src="img/location%20(1).png" width="16" height="16">
				<span>肉禽类</span>
			</li>
			<li class="menu-item">
				<img src="img/location%20(1).png" width="16" height="16">
				<span>鞋子</span>
			</li>
		</ul>

		<!-- 主体右侧 -->
		<div class="main">
			<p style="font-size: 14px;">水果类</p>
			<hr style="margin: 30px 0; color: #ddd; opacity: .2;"/>
			<img src="img/User@3x.png" style="position: relative; top: -49px; left: 45%;" width="16" height="16">
			<ul class="product">
				
				<li class="product-item">
					<div class="product-img">
						<a href="product/pltaya.html">
							<img src="img/102.jpg" width="100%" height="220px">
						</a>
						<div class="addWish">
							<img src="img/love.png" width="16" height="16">
						</div>
					</div>
					<div class="product-text">
						<b>缤咕果园 海南红心火龙果6斤装约7个大果 红肉吉祥果新鲜水果</b>
						<div style="margin-top: 10px;">
							<span style="text-decoration: line-through;">￥1.3</span>
							<span style="font-size: 20px; font-weight: 700;">￥1.0<span>
						</div>
					</div>
				</li>
				
				<li class="product-item">
					<div class="product-img">
						<a href="">
							<img src="img/100.jpg" width="100%" height="220px">
						</a>
						<div class="addWish">
							<img src="img/love.png" width="16" height="16">
						</div>
					</div>
					<div class="product-text">
						<b>寻真水果 山东烟台栖霞红富士苹果16-24个 5kg 新鲜苹果</b>
						<div style="margin-top: 10px;">
							<span style="text-decoration: line-through;">￥1.3</span>
							<span style="font-size: 20px; font-weight: 700;">￥1.0<span>
						</div>
					</div>
				</li>
				
				<li class="product-item">
					<div class="product-img">
						<a href="">
							<img src="img/46.jpg" width="100%" height="220px">
						</a>
						<div class="addWish">
							<img src="img/love.png" width="16" height="16">
						</div>
					</div>
					<div class="product-text">
						<b>百宝源 广西百香果 鸡蛋果 1.5kg 24个 西番莲 新鲜水果</b>
						<div style="margin-top: 10px;">
							<span style="text-decoration: line-through;">￥1.3</span>
							<span style="font-size: 20px; font-weight: 700;">￥1.0<span>
						</div>
					</div>
				</li>
				
				<li class="product-item">
					<div class="product-img">
						<a href="">
							<img src="img/19.jpg" width="100%" height="220px">
						</a>
						<div class="addWish">
							<img src="img/love.png" width="16" height="16">
						</div>
					</div>
					<div class="product-text">
						<b>缤咕果园 云南蒙白甜石榴 新鲜水果 散装10斤实惠装</b>
						<div style="margin-top: 10px;">
							<span style="text-decoration: line-through;">￥1.3</span>
							<span style="font-size: 20px; font-weight: 700;">￥1.0<span>
						</div>
					</div>
				</li>
				
				<li class="product-item">
					<div class="product-img">
						<a href="">
							<img src="img/17.jpg" width="100%" height="220px">
						</a>
						<div class="addWish">
							<img src="img/love.png" width="16" height="16">
						</div>
					</div>
					<div class="product-text">
						<b>寻真水果 山东菜阳 丰 水梨黄金梨子 2.5kg 新鲜水果</b>
						<div style="margin-top: 10px;">
							<span style="text-decoration: line-through;">￥1.3</span>
							<span style="font-size: 20px; font-weight: 700;">￥1.0<span>
						</div>
					</div>
				</li>
				
				<li class="product-item">
					<div class="product-img">
						<a href="">
							<img src="img/112.jpg" width="100%" height="220px">
						</a>
						<div class="addWish">
							<img src="img/love.png" width="16" height="16">
						</div>
					</div>
					<div class="product-text">
						<b>新鲜冬枣 1500g 礼盒装 大荔冬枣 水果礼盒 新鲜水果 冬枣 顺丰快递发货 5斤礼盒装</b>
						<div style="margin-top: 10px;">
							<span style="text-decoration: line-through;">￥1.3</span>
							<span style="font-size: 20px; font-weight: 700;">￥1.0<span>
						</div>
					</div>
				</li>
				
				<li class="product-item">
					<div class="product-img">
						<a href="">
							<img src="img/146.jpg" width="100%" height="220px">
						</a>
						<div class="addWish">
							<img src="img/love.png" width="16" height="16">
						</div>
					</div>
					<div class="product-text">
						<b>鲜游记 嘻溪蜜白肉蜜柚 2个装 2个装 约2.5kg 福建平和新鲜柚子</b>
						<div style="margin-top: 10px;">
							<span style="text-decoration: line-through;">￥1.3</span>
							<span style="font-size: 20px; font-weight: 700;">￥1.0<span>
						</div>
					</div>
				</li>
				
				<li class="product-item">
					<div class="product-img">
						<a href="">
							<img src="img/112.jpg" width="100%" height="220px">
						</a>
						<div class="addWish">
							<img src="img/love.png" width="16" height="16">
						</div>
					</div>
					<div class="product-text">
						<b>新鲜冬枣 1500kg 礼盒装 大荔冬枣 水果礼盒 新鲜水果 冬枣 顺丰快递发货 3斤礼盒装</b>
						<div style="margin-top: 10px;">
							<span style="text-decoration: line-through;">￥1.3</span>
							<span style="font-size: 20px; font-weight: 700;">￥1.0<span>
						</div>
					</div>
				</li>
			</ul>
			
			
		</div>
	</div>
	
	<!-- 底部 -->
	<div class="footer">
		<p>全国高职院校Web应用软件开发技能竞赛</p>
	</div>
	</body>
</html>
